<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ notification_title }} - {{ platform_name }}</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header {
            text-align: center;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .notification-type-info {
            border-bottom: 3px solid #17a2b8;
        }
        .notification-type-success {
            border-bottom: 3px solid #28a745;
        }
        .notification-type-warning {
            border-bottom: 3px solid #ffc107;
        }
        .notification-type-error {
            border-bottom: 3px solid #dc3545;
        }
        .platform-name {
            font-size: 20px;
            color: #666;
            margin-bottom: 10px;
        }
        .notification-title {
            color: #2c3e50;
            font-size: 24px;
            margin: 0;
        }
        .notification-icon {
            font-size: 48px;
            margin: 20px 0;
        }
        .icon-info { color: #17a2b8; }
        .icon-success { color: #28a745; }
        .icon-warning { color: #ffc107; }
        .icon-error { color: #dc3545; }
        
        .content {
            margin-bottom: 30px;
        }
        .notification-content {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            border-left: 4px solid #17a2b8;
        }
        .notification-content.success {
            border-left-color: #28a745;
            background-color: #d4edda;
        }
        .notification-content.warning {
            border-left-color: #ffc107;
            background-color: #fff3cd;
        }
        .notification-content.error {
            border-left-color: #dc3545;
            background-color: #f8d7da;
        }
        .details {
            background-color: #e9ecef;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
        }
        .details-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #495057;
        }
        .button {
            display: inline-block;
            background-color: #007bff;
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            margin: 20px 0;
        }
        .button-success { background-color: #28a745; }
        .button-warning { background-color: #ffc107; color: #212529; }
        .button-error { background-color: #dc3545; }
        
        .footer {
            text-align: center;
            color: #666;
            font-size: 14px;
            border-top: 1px solid #eee;
            padding-top: 20px;
            margin-top: 30px;
        }
        .timestamp {
            color: #999;
            font-size: 14px;
            text-align: center;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header notification-type-{{ notification_type or 'info' }}">
            <div class="platform-name">🔔 {{ platform_name }} 通知</div>
            <div class="notification-icon icon-{{ notification_type or 'info' }}">
                {% if notification_type == 'success' %}✅
                {% elif notification_type == 'warning' %}⚠️
                {% elif notification_type == 'error' %}❌
                {% else %}ℹ️{% endif %}
            </div>
            <h1 class="notification-title">{{ notification_title }}</h1>
        </div>
        
        <div class="content">
            {% if user_name %}
            <p>亲爱的 <strong>{{ user_name }}</strong>，</p>
            {% endif %}
            
            <div class="notification-content {{ notification_type or 'info' }}">
                {{ notification_message }}
            </div>
            
            {% if details %}
            <div class="details">
                <div class="details-title">详细信息：</div>
                {% for key, value in details.items() %}
                <p><strong>{{ key }}：</strong>{{ value }}</p>
                {% endfor %}
            </div>
            {% endif %}
            
            {% if action_url and action_text %}
            <div style="text-align: center;">
                <a href="{{ action_url }}" class="button button-{{ notification_type or 'info' }}">
                    {{ action_text }}
                </a>
            </div>
            {% endif %}
            
            {% if additional_info %}
            <div style="margin-top: 20px;">
                <h3>📋 相关信息</h3>
                <ul>
                {% for info in additional_info %}
                    <li>{{ info }}</li>
                {% endfor %}
                </ul>
            </div>
            {% endif %}
            
            <div class="timestamp">
                通知时间：{{ notification_time or "刚刚" }}
            </div>
        </div>
        
        <div class="footer">
            <p>此邮件由 {{ platform_name }} 系统自动发送，请勿直接回复。</p>
            <p>如不希望接收此类通知，可在 <a href="{{ platform_url }}/settings/notifications">通知设置</a> 中进行配置。</p>
            <p>如有疑问，请访问 <a href="{{ help_url }}">帮助中心</a> 或联系客服。</p>
            <p>&copy; 2024 {{ platform_name }}. All rights reserved.</p>
        </div>
    </div>
</body>
</html>